<template>
    <basic-container>
        <div>
            <h5>温馨提示：阿里OSS经常有比较优惠的存储包，建议您择时购买。</h5>
            <p>使用阿里云OSS需要开通阿里云账号，且开通OSS功能</p>
            <p>阿里云官网：<el-link href="https://www.aliyun.com" target="_blank">https://www.aliyun.com</el-link></p>
            <p>阿里云OSS文档：<el-link href="http://test.lightkitch.com/front/doc_PurchaseDomainName.htm" target="_blank">http://test.lightkitch.com/front/doc_PurchaseDomainName.htm</el-link></p>
        </div>
<!--表单-->
        <div style="width:50%;margin-top: 10px;">
            <avue-form ref="form" v-model="obj" :option="option"  @submit="submit">
            </avue-form>
        </div>


    </basic-container>
</template>
<script>
    import {
        getOss,
        setOss,
    } from '@/api/base/sysSet/ossSet'
    import {
        convertAddCode
    } from '@/util/util';
    export default {
        data() {
            return {
                obj:{},
                option:{
                    emptyBtn:false,
                    labelWidth:'200',
                    labelPosition:'left',
                    column: [{
                        label: "阿里云AccessKey ID",
                        prop: "oss_access_key_id",
                        tip:'阿里云AccessKey ID （OSS专用，与其他阿里云服务不冲突）',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入ID",
                            trigger: "blur"
                        }]
                    },{
                        label: "阿里云Access Key Secret",
                        prop: "oss_access_key_secret",
                        tip:'阿里云Access Key Secret（OSS专用，与其他阿里云服务不冲突）',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入Key",
                            trigger: "blur"
                        }]

                    },{
                        label: "Bucket 域名",
                        prop: "oss_bucketName",
                        tip:'Bucket 域名',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入域名",
                            trigger: "blur"
                        }]

                    },{
                        label: "EndPoint（地域节点）",
                        tip:'EndPoint（地域节点）',
                        prop: "oss_endpoint",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入地域节点",
                            trigger: "blur"
                        }]

                    },{
                        label: "OSS域名",
                        prop: "oss_getUrl",
                        tip:'OSS域名）',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入OSS域名",
                            trigger: "blur"
                        }]

                    }]
                }
            }
        },
        created(){
            this.getData()
        },
        methods:{
            getData(){
                getOss().then(res=>{
                    if(res.data.code==200){
                        this.obj=res.data.data
                    }
                })
            },
            submit (form,done) {
                convertAddCode(this.obj.oss_access_key_id,data=>{
                    this.obj.oss_access_key_id = data;
                });
                convertAddCode(this.obj.oss_access_key_secret,data=>{
                    this.obj.oss_access_key_secret = data;
                });
                setOss(this.obj).then(res=>{
                           done()
                        this.$message({
                            message:'提交成功',
                            type:'success'
                        })
                        this.getData()


                })

            },
        }
    }

</script>
<style>
    h5{
        color: darkred;
        font-weight: bold;
    }
    p{
        line-height: 30px;
    }
</style>